extends ../_layout

block active
  - sidebar_active = 'form-validation.html'

block content
  h3 Form Validation
    small Validating forms frontend have never been so powerful and easy.

  // START row
  .row
    .col-lg-6
      form(method='post', action="#", data-parsley-validate='', novalidate='')
        // START panel
        .panel.panel-default
          .panel-heading
            .panel-title Form Register
          .panel-body
            .form-group
              label.control-label
                | Email Address *
              input.form-control(type='text', name='email', required)
            .form-group
              label.control-label
                | Password *
              input#id-password.form-control(type='password', name='password', required)
            .form-group
              label.control-label
                | Confirm Password *
              input.form-control(type='password', name='confirmPassword', required, data-parsley-equalto="#id-password")
            .required * Required fields
          .panel-footer
            .clearfix
              .pull-left
                .checkbox.c-checkbox
                  label
                    input(type='checkbox', name="agreements", required, data-parsley-error-message='Please read and agree the terms')
                    span.fa.fa-check
                    |  I agree with the 
                    a(href="#") terms
              .pull-right
                button.btn.btn-primary(type='submit') Register
        // END panel
    .col-lg-6
      form(method='post', data-parsley-validate='', novalidate='')
        // START panel
        .panel.panel-default
          .panel-heading
            .panel-title Form Login
          .panel-body
            .form-group
              label.control-label
                | Email Address *
              input.form-control(type='text', name='email', required)
            .form-group
              label.control-label
                | Password *
              input.form-control(type='password', name='password', required)
            .required * Required fields
          .panel-footer
            button.btn.btn-primary(type='submit') Login
        // END panel
  // END row
  // START row
  .row
    .col-md-12
      form.form-horizontal(action='#', data-parsley-validate='', novalidate='')
        // START panel
        .panel.panel-default
          .panel-heading
            .panel-title Fields validation
          .panel-body
            h4 Type validation
            fieldset
              .form-group
                label.col-sm-2.control-label Required Text
                .col-sm-6
                  input.form-control(type='text', name='required', required="required")
                .col-sm-4
                  code required
            fieldset
              .form-group
                label.col-sm-2.control-label Email
                .col-sm-6
                  input.form-control(type='email', name='email', data-parsley-type='email')
                .col-sm-4
                  code data-parsley-type="email"
            fieldset
              .form-group
                label.col-sm-2.control-label Number
                .col-sm-6
                  input.form-control(type='text', name='number', data-parsley-type='number')
                .col-sm-4
                  code data-parsley-type="number"
            fieldset
              .form-group
                label.col-sm-2.control-label Integer
                .col-sm-6
                  input.form-control(type='text', name='integer', data-parsley-type='integer')
                .col-sm-4
                  code data-parsley-type="integer"
            fieldset
              .form-group
                label.col-sm-2.control-label Digits
                .col-sm-6
                  input.form-control(type='text', name='digits', data-parsley-type='digits')
                .col-sm-4
                  code data-parsley-type="digits"
            fieldset
              .form-group
                label.col-sm-2.control-label Alphanum
                .col-sm-6
                  input.form-control(type='text', name='alphanum', data-parsley-type='alphanum')
                .col-sm-4
                  code data-parsley-type="alphanum"
            fieldset
              .form-group
                label.col-sm-2.control-label Url
                .col-sm-6
                  input.form-control(type='text', name='url', data-parsley-type='url')
                .col-sm-4
                  code data-parsley-type="url"
            fieldset
              .form-group
                label.col-sm-2.control-label Equal to
                .col-sm-3
                  input.form-control#id-source(type='text', placeholder="#id-source")
                .col-sm-3
                  input.form-control(type='text', data-parsley-equalto='#id-source')
                .col-sm-4
                  code data-parsley-equalto='#id-source'

            h4 Range validation
            fieldset
              .form-group
                label.col-sm-2.control-label Minlength
                .col-sm-6
                  input.form-control(type='text', name='minlength', data-parsley-minlength='6')
                .col-sm-4
                  code data-parsley-minlength="6"
            fieldset
              .form-group
                label.col-sm-2.control-label Maxlength
                .col-sm-6
                  input.form-control(type='text', name='maxlength', data-parsley-maxlength='10')
                .col-sm-4
                  code data-parsley-maxlength="10"
            fieldset
              .form-group
                label.col-sm-2.control-label Length
                .col-sm-6
                  input.form-control(type='text', name='length', data-parsley-length='[6, 10]')
                .col-sm-4
                  code data-parsley-length="[6, 10]"
            fieldset
              .form-group
                label.col-sm-2.control-label Min
                .col-sm-6
                  input.form-control(type='text', name='min', data-parsley-min='6')
                .col-sm-4
                  code data-parsley-min="6"
            fieldset
              .form-group
                label.col-sm-2.control-label Max
                .col-sm-6
                  input.form-control(type='text', name='max', data-parsley-max='6')
                .col-sm-4
                  code data-parsley-max="6"
            fieldset
              .form-group
                label.col-sm-2.control-label Min words
                .col-sm-6
                  input.form-control(type='text', data-minwords='6')
                .col-sm-4
                  code data-minwords='6'
            fieldset
              .form-group
                label.col-sm-2.control-label Max words
                .col-sm-6
                  input.form-control(type='text', data-maxwords='6')
                .col-sm-4
                  code data-maxwords='6'
            
            fieldset
              .form-group
                label.col-sm-2.control-label Range of words
                .col-sm-6
                  input.form-control(type='text', data-rangewords='[6,10]')
                .col-sm-4
                  code data-rangewords='[6,10]'

          .panel-footer.text-center
            button.btn.btn-info(type='submit') Run validation
        // END panel
  // END row

block vendor_js
  // PARSLEY
  script(src='../vendor/parsleyjs/dist/parsley.min.js')